<template>
	<view class="new_word_box">
		<view class="title">{{ title }}</view>
		<view class="box">
			<view class="item flex_ac_js" v-for="item in words" :key="item.id">
				<view class="word">
					<view class="title1">
						<text class="text1">{{ item.word }}</text>
						<text class="text2">/{{ item.phonetic }}/</text>
					</view>
					<view class="title2">{{ item.interpretation }}</view>
				</view>
				<view class="audio">
					<image src="@/static/images/icon/audio.svg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			words: {
				type: Array,
				default: []
			},
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		},
	}
</script>

<style lang="scss" scoped>
.new_word_box {
	.title {
		padding: 20rpx 30rpx;
		color: $uni-color-primary;
		background-color: $uni-bg-color-opacity;
	}
	
	.box {
		padding: 30rpx;
		
		.item {
			border-bottom: 1rpx solid $uni-border-bottom-color;
			
			.word {
				.title1 {
					margin-bottom: 12rpx;
					
					.text1 {
						font-size: 32rpx;
						font-weight: 800;
					}
					
					.text2 {
						font-size: 24rpx;
						margin-left: 16rpx;
						color: $uni-text-color-grey;
					}
				}
				
				.title2 {
					color: $uni-text-color;
					font-size: 28rpx;
					margin-bottom: 20rpx;
				}
			}
			
			.audio image {
				width: 38rpx;
				height: 38rpx;
			}
		}
	}
}
</style>
